<template>
  <view class="router-view bcl-active">
    <view class="p-20 bcl-white user-info">
      <view class="user-intro box box-column-center">
        <view class="avater uni-avatar mr-10">
          <image :src="userIntro.uinfo.avatar || defaultImage" />
        </view>
        <view>
          <view>{{ userIntro.uinfo.realname }}</view>
          <view class="mt-10">
            {{ userIntro.uinfo.sex === 0 ? "女" : "男" }}
            <text class="mr-5 ml-10">{{
              userIntro.uinfo.ago ? userIntro.uinfo.ago + "岁" : "年龄未知"
            }}</text>
            <text v-if="userIntro.uinfo.address"
              >| {{ userIntro.uinfo.address }} |</text
            >
            <text v-if="userIntro.uinfo.working_seniority"
              >| {{ userIntro.uinfo.working_seniority }}年工作经验</text
            >
          </view>
        </view>
      </view>
      <view class="box mt-15 cl-second box-column-center">
        <!-- <text
          class="icon icon-edit mr-10"
          @tap="editStatus = !editStatus"
        ></text> -->
        <view class="mr-10" v-if="userIntro.uinfo.mobile">
          <text class="icon icon-phone cl-warning"></text>
          <text>{{ userIntro.uinfo.mobile }}</text>
        </view>
        <view v-if="userIntro.email">
          <text class="icon icon-email cl-danger fz-22"></text>
          <text>{{ userIntro.email }}</text>
        </view>
      </view>
    </view>
    <view style="background:#fff;border-top:15px solid #f8f8f8;">
      	<u-cell-item icon="tags" value="添加" title="工作经验" @tap="add(1)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;">
          <u-collapse>
            <u-collapse-item :title="'工作经验'+(index+1)" v-for="(item, index) in userIntro.jobs_lists" :key="index">
              
            <view class="bcl-disabled time-tag bold inline-block cl-basic"
              >{{ item.start_year }}-{{ item.start_month }}至{{
                item.end_year
              }}-{{ item.end_month }}</view>
              
            <view class="mt-10 bold">{{ item.company_name }}</view>
            <view class="cl-basic">
              <text class="mr-15">{{ item.jobs }}</text>
            </view>
            <view class="summary mt-10">
              {{ item.achievements }}
            </view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'jobs_lists')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="项目经验" @tap="add(2)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;">
          <u-collapse>
            <u-collapse-item :title="'项目经验'+(index+1)" v-for="(item, index) in userIntro.projects_list" :key="index">
              
            <view class="bcl-disabled time-tag bold inline-block cl-basic"
              >{{ item.start_year }}-{{ item.start_month }}至{{
                item.end_year
              }}-{{ item.end_month }}</view>
              
            <view class="mt-10 bold">{{ item.company_name }}</view>
            <view class="cl-basic">
              <text class="mr-15">{{ item.jobs }}</text>
            </view>
            <view class="summary mt-10">
              {{ item.achievements }}
            </view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'projects_list')">删除</u-button>

            </view>

            </u-collapse-item>
          </u-collapse>

        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="个人教育" @tap="add(3)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'教育经历'+(index+1)" v-for="(item, index) in userIntro.educations_list" :key="index">
              
            <view class="bcl-disabled time-tag bold inline-block cl-basic"
              >{{ item.start_year }}-{{ item.start_month }}至{{
                item.end_year
              }}-{{ item.end_month }}</view>

              
            <view class="mt-10 bold">{{ item.school_name }}</view>
            <view class="cl-basic">
              <text class="mr-15">{{ item.speciality }}</text>
              <!-- <text>12000元/月 以上</text> -->
            </view>
            <view class="summary mt-10">
              {{ item.education }}
            </view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'educations_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="培训经历" @tap="add(4)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'培训经历'+(index+1)" v-for="(item, index) in userIntro.trainings_list" :key="index">
              
            <view class="bcl-disabled time-tag bold inline-block cl-basic"
              >{{ item.start_year }}-{{ item.start_month }}至{{
                item.end_year
              }}-{{ item.end_month }}</view>

              
            <view class="mt-10 bold">机构名称：{{ item.institution_name }}</view>
            <view class="mt-10 bold">培训课程：{{ item.training_course }}</view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'trainings_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="语言能力" @tap="add(5)"></u-cell-item>
                <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'语言能力'+(index+1)" v-for="(item, index) in userIntro.languages_list" :key="index">
            
            <view class="mt-10 bold">语言：{{ item.language }}</view>
            <view class="mt-10 bold">听说能力：{{ item.listening_and_speaking }}</view>
            <view class="mt-10 bold">读写能力：{{ item.literacy }}</view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'languages_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="证书" @tap="add(6)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'证书'+(index+1)" v-for="(item, index) in userIntro.certificates_list" :key="index">
              
              
            <view class="mt-10 bold">证书类别：{{ item.type }}</view>
            <view class="mt-10 bold">证书名称：{{ item.name }}</view>
            <view class="mt-10 bold">证书编号：{{ item.num }}</view>
            <view class="mt-10 bold">获得时间：{{ item.get_date }}</view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'certificates_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="加密锁"  @tap="add(7)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'加密锁'+(index+1)" v-for="(item, index) in userIntro.encrypt_list" :key="index">
              
              
            <view class="mt-10 bold">名称：{{ item.name }}</view>
            <view class="mt-10 bold">锁号：{{ item.number }}</view>
            <view class="mt-10 bold">省份：{{ item.province }}</view>
            <view class="mt-10 bold">专业：{{ item.speciality }}</view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'encrypt_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加" title="图片附件"  @tap="add(8)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          <u-collapse >
            <u-collapse-item :title="'图片附件'+(index+1)" v-for="(item, index) in userIntro.imgs_list" :key="index">
              
              
            <view class="mt-10 bold">
                <image :src="apiurl+item.file_path" />
            </view>
            <view style="margin:10px 0 0 0;padding:0 0 10px 0;">
              
            <u-button type="error" plain size="mini" @tap="delItem(index,'imgs_list')">删除</u-button>

            </view>
            </u-collapse-item>
          </u-collapse>
        </view>
    </view>
    
    <view style="background:#fff;">
      	<u-cell-item icon="tags" value="添加/修改" title="自我评价"  @tap="add(9)"></u-cell-item>
        <view style="padding:0 20px;border-bottom:10px solid #f8f8f8;" class="aaaa">
          
           <view class="" style="padding:10px 0 10px 0;">{{userIntro.uinfo.introduce}}</view>
        </view>
    </view>

<view class="mask" v-if="showzac"></view>
  </view>
</template>

<script>
import {
  userIntro,
  delProject,
  delJob,
  addProject,
  addJob,
  editProject,
  editJob,
  addEduition,
  delEduition,
  delInfo
} from "@/apis/user";
import uniCell from "@/components/cell";

import config from "@/config";

export default {
  components: {
    uniCell,
  },

  data() {
    return {
      defaultImage: this.$config.default,
      userIntro: {
        uinfo: {},
      },
      apiurl:'',
      editStatus: false, // 是否处于编辑状态

      // 添加的经历类型 1 = 工作； 2 = 项目;个人简历=3
      addType: null,

      // 添加的经历表单
      experience: {
        startTime: "",
        endTime: "",
        name: "",
        jobs: "",
        achievements: "",

      },
      
      showzac:false
    };
  },

  onLoad() {
    this.getUserIntro();
    this.apiurl = config.imgurl
  },
  onShow(){
     this.getUserIntro();
  },

  methods: {
    /**
     * 获取个人简介
     */
    async getUserIntro() {
      let { code, data, message } = await userIntro();
      if (code === 200){
        this.userIntro = data;
        console.log(data)
      } 
      
    },
    add(type){
        if(type == 6){
          uni.navigateTo({
              url: `/user/info/certificate?type=${type}`,
          });

        }else if(type == 7){
          uni.navigateTo({
              url: `/user/info/encrypt?type=${type}`,
          });

        }else if(type == 8){
          uni.navigateTo({
              url: `/user/info/attachment?type=${type}`,
          });

        }else if(type == 9){
          uni.navigateTo({
              url: `/user/info/introduce?type=${type}`,
          });

        }else{
          uni.navigateTo({
              url: `/user/info/add?type=${type}`,
          });
          
        }
    },

    /**
     * 删除工作经验或项目经验
     */
    delItem(index, type) {
      this.showzac = true
      uni.showModal({
        title: "温馨提示",
        content: "您确定要删除该条经历信息",
        success: async (res) => {
          if (res.confirm) {
            // const delFn = type === "projects_list" ? delProject : delJob;
            var delFn = null;
            var params;
            if(type == 'jobs_lists'){
                delFn = delJob
                params = {
                  id: this.userIntro[type][index].id,
                };
            }
            if(type == 'projects_list'){
                delFn = delProject
                params = {
                  id: this.userIntro[type][index].id,
                };
            }
            if(type == 'educations_list'){
                delFn = delEduition
                params = {
                  id: this.userIntro[type][index].id,
                };
            }
            
            if(type == 'trainings_list'){
                delFn = delInfo
                params = {
                  id: this.userIntro[type][index].id,
                  type:'trainings'
                };
            }

            if(type == 'languages_list'){
                delFn = delInfo
                params = {
                  id: this.userIntro[type][index].id,
                  type:'languages'
                };
            }
          

            if(type == 'certificates_list'){
                delFn = delInfo
                params = {
                  id: this.userIntro[type][index].id,
                  type:'certificates'
                };
            }

            if(type == 'encrypt_list'){
                delFn = delInfo
                params = {
                  id: this.userIntro[type][index].id,
                  type:'encrypt'
                };
            }
            if(type == 'imgs_list'){
                delFn = delInfo
                params = {
                  id: this.userIntro[type][index].id,
                  type:'imgs'
                };
            }

            
            let { code, data } = await delFn(params);
            if (code === 200) {
              this.userIntro[type].splice(index, 1);
              this.showzac = false
              this.$toast("删除成功");
            }
          }else if (res.cancel) {
            this.showzac = false
            console.log('用户点击取消');
           }
        },
      });
    },

    /**
     * 添加工作经历
     */
    addExperience(type) {
      this.addType = type;
      this.experience = {
        startTime: "",
        endTime: "",
        name: "",
        jobs: "",
        achievements: "",
      };
      this.toBottom();
    },

    /**
     * 编辑经验
     */
    editItem(item, name, type) {
      this.addType = type;
      this.experience = {
        startTime: [item.start_year, item.start_month].join("-"),
        endTime: [item.end_year, item.end_month].join("-"),
        name: name === "jobs_lists" ? item.company_name : item.project_name,
        jobs: item.jobs,
        achievements: item.achievements,
        id: item.id,
      };
      this.toBottom();
    },

    toBottom() {
      setTimeout(function() {
        uni
          .createSelectorQuery()
          .select(".router-view")
          .boundingClientRect(function(rect) {
            uni.pageScrollTo({
              scrollTop: rect.height + 1000,
            });
          })
          .exec();
      }, 300);
    },

    /**
     * 保存经验信息
     */
    async saveInfo(Type) {
      if (!this.experience.startTime || !this.experience.endTime)
        return this.$toast("请输入起始时间");
      if (
        new Date(this.experience.startTime).getTime() >
        new Date(this.experience.endTime).getTime()
      )
        return this.$toast("开始时间不能大于结束时间");
      if (
        !this.experience.name ||
        !this.experience.jobs ||
        !this.experience.achievements
      )
        return this.$toast("请填写完整职业经验信息");
        let params='';
      if(Type==3){
        params = {
          ...this.experience,
          start_year: this.experience.startTime.substring(0, 4),
          start_month: this.experience.startTime.substring(5, 7),
          end_year: this.experience.endTime.substring(0, 4),
          end_month: this.experience.endTime.substring(5, 7),
          school_name: this.experience.name,
          speciality: this.experience.jobs,
          education: this.experience.achievements,
        };
      }else{
        params = {
        ...this.experience,
        start_year: this.experience.startTime.substring(0, 4),
        start_month: this.experience.startTime.substring(5, 7),
        end_year: this.experience.endTime.substring(0, 4),
        end_month: this.experience.endTime.substring(5, 7),
        company_name: this.experience.name,
        project_name: this.experience.name,
      };
      }
      console.log(params);

      let requestFn = null;
      // 存在id 则为编辑
      if (this.experience.id) {
        requestFn = this.addType === 1 ? editJob : editProject;
      } else {
        // 新增经历
        requestFn = this.addType === 1 ? addJob :this.addType ===2?addProject: addEduition;
      }

      let { code, data } = await requestFn(params);
      if (code === 200) {
        await this.getUserIntro();
        this.$toast("操作成功");
        this.addType = null;
      }
    },


    // 日期更改回调
    changeStartTime(event) {
      this.experience.startTime = event.target.value.substring(0, 7);
    },

    changeEndTime(event) {
      this.experience.endTime = event.target.value.substring(0, 7);
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .user-info {
    .uni-avatar {
      width: 100upx;
      height: 100upx;
      image {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .work {
    .icon-plus {
      width: 40upx;
      height: 40upx;
      text-align: center;
      padding: 5upx;
    }

    .work-content {
      padding-top: 40upx;
      border-bottom: 1upx solid $color-border-deep;
      padding-bottom: 40upx;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .time-tag {
        padding: 10upx 20upx;
        border-radius: 100upx;
      }
    }
  }
  .uni-input {
    margin-bottom: 0;
    border: 0;
  }
}
.aaaa{

      .u-collapse-head{
        color:red;
  font-size:12px;

      }
}

.mask {
position: fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100vh;
background:rgba(0,0,0,0.4);

}
</style>
